<template>
  <div id="app">
    <div class="mk-nav">
      <div class="header-box">
        <div class="header">
          <div class="header-top">
            <div class="left">
              <div class="logo">
                <img src="./assets/logo.png" alt>
              </div>
              <div class="title">绿馨环保</div>
              <div class="line"></div>
              <div class="sub-title">
                <span class="big">绿馨环保</span>
                <span>争做行业领先者</span>
              </div>
            </div>
            <div class="right">
              <div class="phone">
                <div class="phone-img">
                  <img src="./assets/phone.png" alt>
                </div>
                <span class="text">绿馨环保：</span>
                <span class="phone-num">025-86658313</span>
              </div>
              <div class="slogan">超过5000位用户的共同选择</div>
            </div>
          </div>
          <div class="header-bottom">
            <ul class="list">
              <li>
                <router-link to="/" exact-active-class="active">首页</router-link>
              </li>
              <li class="company-more" @mouseenter="showMenu" @mouseleave="hideMenu">
                <router-link to :active-class="routlinkActive?'active':''">公司简介</router-link>
                <ul class="more-item" v-show="show">
                  <li v-for="(item,index) in navList">
                    <router-link
                      :to="item.link"
                      :class="activeClass==index?'active-item':''"
                      @click.native="clickItem(index)"
                    >{{item.name}}</router-link>
                  </li>
                </ul>
              </li>
              <li>
                <router-link to="/products" active-class="active">产品展示</router-link>
              </li>
              <li>
                <router-link to="/cases" active-class="active">案例展示</router-link>
              </li>
              <li>
                <router-link to="/knowledge" active-class="active">环保知识</router-link>
              </li>
              <li>
                <router-link to="/contact" active-class="active">联系我们</router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <router-view/>
    <page-footer></page-footer>
  </div>
</template>

<script>
import PageFooter from "./components/footer";
import getData from "./api/getInfo";

export default {
  name: "App",
  components: {
    "page-footer": PageFooter
  },
  data() {
    return {
      navList: [
        { link: "/company", name: "关于我们" },
        { link: "/company-system", name: "研发体系" },
        { link: "/company-honor", name: "公司荣耀" },
        { link: "/company-culture", name: "企业文化" }
      ],
      activeClass: -1,
      show: false,
      activeIndex: "1",
      routlinkActive: false
    };
  },
  watch: {
    $route(to, from) {
      if (
        to.path == "/" ||
        to.path == "/products" ||
        to.path == "/cases" ||
        to.path == "/knowledge" ||
        to.path == "/contact"
      ) {
        this.routlinkActive = false;
        this.activeClass = -1;
        this.show = false;
      }
    }
  },
  created() {
    if (
      this.$route.path == "/company" ||
      this.$route.path == "/company-honor" ||
      this.$route.path == "/company-culture" ||
      this.$route.path == "/company-system"
    ) {
      this.routlinkActive = true;
    }
    if (this.$route.path == "/company") {
      this.activeClass = 0;
    } else if (this.$route.path == "/company-system") {
      this.activeClass = 1;
    } else if (this.$route.path == "/company-honor") {
      this.activeClass = 2;
    } else if (this.$route.path == "/company-culture") {
      this.activeClass = 3;
    }
  },
  mounted() {
    // return;
    // // return;
    // if (this.$route.path == "/") {
    //   this.activeIndex = "1";
    // } else if (this.$route.path == "/company") {
    //   this.activeIndex = "2";
    // } else if (this.$route.path == "/products") {
    //   this.activeIndex = "3";
    // } else if (this.$route.path == "/cases") {
    //   this.activeIndex = "4";
    // } else if (this.$route.path == "/knowledge") {
    //   this.activeIndex = "5";
    // } else if (this.$route.path == "/contact") {
    //   this.activeIndex = "6";
    // }
    // console.log(this.activeIndex);
  },
  methods: {
    showMenu() {
      this.show = true;
    },
    hideMenu() {
      this.show = false;
    },
    clickItem(index) {
      this.activeClass = index;
      this.routlinkActive = true;
    },
    handleClose() {
      this.show = false;
    },
    handleSelect(key, keyPath) {
      // console.log(keyPath);
    }
  }
};
</script>

<style lang="scss" scoped>
.mk-nav {
  position: relative;
  z-index: 9999;
  box-shadow: 0 4px 38px rgba(120, 114, 169, 0.15);
  .header-box {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 180px;
    background: #fff;
    .header {
      height: 180px;
      width: 1200px;
      .header-top {
        height: 120px;
        width: 100%;
        display: flex;
        .left {
          width: 50%;
          display: flex;
          .logo {
            width: 55px;
            height: 60px;
            margin-top: 35px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .title {
            font-size: 20px;
            color: #96ce54;
            margin: 51px 32px 0 28px;
          }
          .line {
            width: 1px;
            height: 70px;
            background: #323232;
            margin-top: 30px;
          }
          .sub-title {
            padding-top: 35px;
            padding-left: 39px;
            display: flex;
            flex-direction: column;
            .big {
              font-size: 20px;
              color: #323232;
              font-weight: bold;
              margin-bottom: 8px;
            }
          }
        }
        .right {
          width: 50%;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          .phone {
            display: flex;
            .phone-img {
              width: 30px;
              height: 30px;
              margin-top: 29px;
              margin-right: 10px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .text {
              font-size: 16px;
              color: #323232;
              margin-top: 33px;
            }
            .phone-num {
              font-size: 16px;
              color: #96ce54;
              margin-top: 33px;
            }
          }
          .slogan {
            font-size: 14px;
            color: #ffffff;
            background-color: #323232;
            border-radius: 4px;
            margin-top: 17px;
            padding: 4px 8px;
          }
        }
      }
      .header-bottom {
        height: 60px;
        width: 1080px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .list {
          width: 100%;
          height: 60px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          list-style: none;
          li {
            display: block;
            width: 100px;
            height: 60px;
            line-height: 60px;
            text-align: center;
          }
          .company-more {
            .more-item {
              background: #fff;
              padding: 10px 0 5px 0;
              box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.1);
              transition: all 0.5s;
              li {
                height: 32px;
                line-height: 32px;
                margin-bottom: 10px;
                cursor: pointer;
                a {
                  display: block;
                }
              }
              .active-item {
                background: #96ce54;
                color: #fff;
              }
            }
          }
        }
        a {
          font-size: 16px;
          color: #323232;
          text-decoration: none;
          position: relative;
          display: block;
          height: 100%;
          box-sizing: border-box;
        }
        a:hover {
          color: #96ce54;
        }
        .active {
          color: #96ce54;
          border-bottom: 2px solid #96ce54;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.swiper-pagination .my-bullet-active {
  background-color: #fff;
  opacity: 1;
}
.swiper-pagination-bullet {
  opacity: 1;
  width: 10px;
  height: 10px;
}

body {
  margin: 0;
}

body::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
body::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgb(207, 205, 205);
}
body::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #ededed;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
p {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.el-menu.el-menu--horizontal {
  width: 100%;
  border: none;
  display: flex;
  justify-content: space-between;
}
.el-menu--horizontal > .el-menu--popup {
  min-width: 104px;
  a {
    color: #323232;
    display: block;
  }
}
.el-menu--horizontal > .el-submenu .el-submenu__title {
  color: #323232;
  font-size: 16px;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #96ce54;
}
.el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #96ce54;
}
.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
  display: none;
}
.el-menu--horizontal .el-menu .el-menu-item.is-active {
  background-color: #96ce54;
}
.el-menu--horizontal .el-menu .el-menu-item.is-active a {
  color: #fff;
}
.el-menu--horizontal .el-menu .el-menu-item {
  padding: 0;
  text-align: center;
}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #96ce54;
}
</style>
